<style lang="less" scoped>
@import "./user.less";
</style>

<template>
  <div>
    <Row>
      <Col span="24">
        <Card class="margin-bottom-10">
          <Form inline>
            <FormItem class="margin-bottom-0">
              <Select
                v-model="searchConf.status"
                clearable
                placeholder="请选择状态"
                style="width:120px"
              >
                <Option :value="1">启用</Option>
                <Option :value="0">禁用</Option>
              </Select>
            </FormItem>

            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.name" placeholder="请输入姓名"></Input>
            </FormItem>

            <FormItem class="margin-bottom-0">
              <Input
                v-model="searchConf.id_card"
                placeholder="请输入身份证号"
              ></Input>
            </FormItem>

            <FormItem class="margin-bottom-0">
              <Input
                v-model="searchConf.nickname"
                placeholder="请输入微信昵称"
              ></Input>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input
                v-model="searchConf.phone"
                placeholder="请输入手机号"
              ></Input>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button type="primary" @click="search"
                >{{ $t("find_button") }}/{{ $t("refresh_button") }}</Button
              >
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <div class="margin-bottom-15">
            <Button type="primary" @click="exportFun">{{
              $t("export")
            }}</Button>
          </div>
          <div>
            <Table
              :loading="listLoading"
              :columns="columnsList"
              :data="tableData"
              border
              disabled-hover
            ></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page
              :total="tableShow.listCount"
              :current="tableShow.currentPage"
              :page-size="tableShow.pageSize"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-elevator
              show-sizer
              show-total
            ></Page>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal
      v-model="modalSetting.show"
      width="1200"
      :styles="{ top: '150px' }"
      @on-visible-change="doCancel"
    >
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert"></Icon>
        <span>用户详情</span>
      </p>

      <div class="user-detail-info">
        <div class="info-row">
          <div class="info-item">
            <label>微信昵称：</label>
            <span>{{ formItem.nickname }}</span>
          </div>
          <div class="info-item">
            <label>微信头像：</label>
            <img :src="formItem.headimgurl" width="100" height="100" />
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <label>姓名：</label>
            <span>{{ formItem.name }}</span>
          </div>
          <div class="info-item">
            <label>身份证号：</label>
            <span>{{ formItem.id_card }}</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <label>紧急联系人：</label>
            <span>{{ formItem.emergencyContact }}</span>
          </div>
          <div class="info-item">
            <label>紧急联系电话：</label>
            <span>{{ formItem.emergencyPhone }}</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <label>籍贯：</label>
            <span>{{ formItem.nativePlace }}</span>
          </div>
          <div class="info-item">
            <label>健康状况：</label>
            <span>{{ formItem.healthCondition }}</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <label>详细地址：</label>
            <span>{{ formItem.address }}</span>
          </div>
          <div class="info-item">
            <label>实名认证状态：</label>

            <span v-if="formItem.auth_status === 1" style="color: green;"
              >已认证</span
            >
            <span v-if="formItem.auth_status === 0" style="color: red;"
              >未认证</span
            >
            <Button
              v-if="formItem.auth_status != 1"
              style="margin-left: 10px"
              type="primary"
              @click="realNameAuth"
              :loading="modalSetting.loading"
              >认证</Button
            >
          </div>
        </div>

        <div class="info-row">
          <div class="info-item">
            <label>身份证人面图片</label>
            <img :src="formItem.front_image" width="100" height="100" />
          </div>
          <div class="info-item">
            <label>身份证反面图片</label>
            <img :src="formItem.back_image" width="100" height="100" />
          </div>
        </div>
      </div>

      <div slot="footer">
        <Button type="text" @click="cancel" class="margin-right-10"
          >取消</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  getList,
  changeStatus,
  getWxUserDetail,
  realNameAuthApi
} from "@/api/wxUser";
import { getAll } from "@/api/app-group";
import { FormItem } from "view-design";
import { get } from "echarts/lib/CoordinateSystem";

const editButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.edit) {
    return h(
      "Button",
      {
        props: {
          type: "primary"
        },
        style: {
          margin: "0 5px"
        },
        on: {
          click: () => {
            getAll().then(response => {
              vm.appGroup = response.data.data.list;
              vm.formItem.id = currentRow.id;
              vm.formItem.app_name = currentRow.app_name;
              vm.formItem.app_info = currentRow.app_info;
              vm.formItem.app_id = currentRow.app_id;
              vm.formItem.app_secret = currentRow.app_secret;
              vm.formItem.app_group = currentRow.app_group;
              vm.formItem.app_address = currentRow.app_address;
              getAppInfo(currentRow.id).then(response => {
                let res = response.data;
                vm.groupInfo = res.data.groupInfo;
                vm.groupList = res.data.apiList;
                for (let index in vm.groupInfo) {
                  if (
                    res.data.app_detail === null ||
                    typeof res.data.app_detail[index] === "undefined"
                  ) {
                    vm.$set(vm.checkAllStatus, index, false);
                    vm.$set(vm.checkAllIndeterminate, index, false);
                    vm.$set(vm.formItem.app_api, index, []);
                  } else {
                    let hasLength = res.data.app_detail[index].length;
                    if (hasLength === 0) {
                      vm.$set(vm.checkAllStatus, index, false);
                      vm.$set(vm.checkAllIndeterminate, index, false);
                      vm.$set(vm.formItem.app_api, index, []);
                    } else if (vm.groupList[index].length === hasLength) {
                      vm.$set(vm.checkAllStatus, index, true);
                      vm.$set(vm.checkAllIndeterminate, index, false);
                      vm.$set(
                        vm.formItem.app_api,
                        index,
                        res.data.app_detail[index]
                      );
                    } else {
                      vm.$set(vm.checkAllStatus, index, false);
                      vm.$set(vm.checkAllIndeterminate, index, true);
                      vm.$set(
                        vm.formItem.app_api,
                        index,
                        res.data.app_detail[index]
                      );
                    }
                  }
                }
              });
              vm.modalSetting.show = true;
              vm.modalSetting.index = index;
            });
          }
        }
      },
      vm.$t("edit_button")
    );
  }
};
const deleteButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.del) {
    return h(
      "Poptip",
      {
        props: {
          confirm: true,
          title: "您确定要删除这条数据吗? ",
          transfer: true
        },
        on: {
          "on-ok": () => {
            del(currentRow.id).then(response => {
              vm.tableData.splice(index, 1);
              vm.$Message.success(response.data.msg);
            });
            currentRow.loading = false;
          }
        }
      },
      [
        h(
          "Button",
          {
            style: {
              margin: "0 5px"
            },
            props: {
              type: "error",
              placement: "top",
              loading: currentRow.isDeleting
            }
          },
          vm.$t("delete_button")
        )
      ]
    );
  }
};

const detailButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.detail) {
    return h(
      "Button",
      {
        props: {
          type: "primary"
        },
        style: {
          margin: "0 5px"
        },
        on: {
          click: () => {
            getWxUserDetail(currentRow.id).then(response => {
              let res = response.data.data;
              console.log(res);

              vm.formItem.id = res.id;
              vm.formItem.nickname = res.nickname;
              vm.formItem.headimgurl = res.headimgurl;
              vm.formItem.phone = res.phone;
              vm.formItem.name = res.name;
              vm.formItem.id_card = res.id_card;
              vm.formItem.emergencyContact = res.emergencyContact;
              vm.formItem.emergencyPhone = res.emergencyPhone;
              vm.formItem.healthCondition = res.healthCondition;
              vm.formItem.nativePlace = res.nativePlace;
              vm.formItem.address = res.address;
              vm.formItem.auth_status = res.auth_status;
              vm.formItem.front_image = res.front_image;
              vm.formItem.back_image = res.back_image;

              vm.modalSetting.show = true;
              vm.modalSetting.index = index;
            });

            //   vm.$router.push({
            //     path: '/wxUser/detail',
            //     params: {
            //       id: currentRow.id
            //     }
            //   })
          }
        }
      },
      vm.$t("detail_button")
    );
  }
};

export default {
  name: "wx_user_list",
  components: {},
  data() {
    return {
      appGroup: [],
      columnsList: [
        {
          title: "ID",
          type: "id",
          width: 65,
          key: "id",
          align: "center"
        },
        {
          title: "微信昵称",
          key: "nickname",
          align: "center",
          width: 160
        },
        {
          title: "微信头像",
          align: "center",
          key: "headimgurl",
          width: 120,
          render: (h, params) => {
            return h("img", {
              attrs: {
                src: params.row.headimgurl,
                width: 100,
                height: 100
              }
            });
          }
        },
        {
          title: "手机号",
          key: "phone",
          align: "center",
          width: 130
        },
        {
          title: "姓名",
          key: "name",
          width: 120,
          align: "center"
        },
        {
          title: "身份证号",
          key: "id_card",
          align: "center",
          width: 180
        },
        {
          title: "紧急联系人",
          key: "emergencyContact",
          align: "center",
          width: 120
        },
        {
          title: "紧急联系电话",
          key: "emergencyPhone",
          align: "center",
          width: 150
        },
        {
          title: "身体状况",
          key: "healthCondition",
          align: "center",
          width: 100
        },
        {
          title: "籍贯",
          key: "nativePlace",
          align: "center",
          width: 80
        },
        {
          title: "详细地址",
          key: "address",
          align: "center",
          width: 120
        },
        {
          title: "状态",
          align: "center",
          width: 100,
          render: (h, params) => {
            let vm = this;
            return h(
              "i-switch",
              {
                attrs: {
                  size: "large"
                },
                props: {
                  "true-value": 1,
                  "false-value": 0,
                  value: params.row.app_status,
                  disabled: !vm.buttonShow.changeStatus
                },
                on: {
                  "on-change": function(status) {
                    changeStatus(status, params.row.id).then(response => {
                      vm.$Message.success(response.data.msg);
                      vm.getList();
                    });
                  }
                }
              },
              [
                h(
                  "span",
                  {
                    slot: "open"
                  },
                  vm.$t("open_choose")
                ),
                h(
                  "span",
                  {
                    slot: "close"
                  },
                  vm.$t("close_choose")
                )
              ]
            );
          }
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("div", [
              //   editButton(this, h, params.row, params.index),
              //   deleteButton(this, h, params.row, params.index),
              detailButton(this, h, params.row, params.index)
            ]);
          }
        }
      ],
      tableData: [],
      groupInfo: {},
      groupList: {},
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        id_card: "",
        name: "",
        nickname: "",
        phone: "",
        status: "",

      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      formItem: {
        app_name: "",
        app_id: "",
        app_secret: "",
        app_info: "",
        app_api: {},
        app_group: "default",
        id: 0,
        app_address: ""
      },
      ruleValidate: {
        app_name: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ]
      },
      checkAllStatus: {},
      checkAllIndeterminate: {},
      buttonShow: {
        edit: true,
        del: true,
        changeStatus: true,
        detail: true
      },
      listLoading: false
    };
  },
  created() {
    let vm = this;
    vm.getList();
    vm.hasRule("Wxuser/edit").then(res => {
      vm.buttonShow.edit = res;
    });
    vm.hasRule("Wxuser/del").then(res => {
      vm.buttonShow.del = res;
    });
    vm.hasRule("Wxuser/changeStatus").then(res => {
      vm.buttonShow.changeStatus = res;
    });
    vm.hasRule("Wxuser/detail").then(res => {
      vm.buttonShow.detail = res;
    });
  },
  methods: {
    exportFun() {
      this.searchConf.export = 1;
      let vm = this;
      getList({
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        id_card: vm.searchConf.id_card,
        nickname: vm.searchConf.nickname,
        phone: vm.searchConf.phone,
        name: vm.searchConf.name,
        status: vm.searchConf.status,
        export: vm.searchConf.export
      }).then(response => {
        let fileUrl = response.data.data.file_url;
        console.log(fileUrl);
        window.open(fileUrl);
      });
    },
    alertAdd() {
      let vm = this;
      getAll().then(response => {
        vm.appGroup = response.data.data.list;
      });
      getAppInfo().then(response => {
        let res = response.data;
        vm.formItem.app_id = res.data.app_id;
        vm.formItem.app_secret = res.data.app_secret;
        vm.groupInfo = res.data.groupInfo;
        vm.groupList = res.data.apiList;
        for (let index in vm.groupInfo) {
          vm.$set(vm.checkAllStatus, index, false);
          vm.$set(vm.checkAllIndeterminate, index, false);
          vm.$set(vm.formItem.app_api, index, []);
        }
      });
      vm.modalSetting.show = true;
    },
    submit() {
      let vm = this;
      vm.$refs["myForm"].validate(valid => {
        if (valid) {
          vm.modalSetting.loading = true;
          if (vm.formItem.id === 0) {
            add(vm.formItem)
              .then(response => {
                vm.$Message.success(response.data.msg);
                vm.getList();
                vm.cancel();
              })
              .catch(() => {
                vm.modalSetting.loading = false;
              });
          } else {
            edit(vm.formItem)
              .then(response => {
                vm.$Message.success(response.data.msg);
                vm.getList();
                vm.cancel();
              })
              .catch(() => {
                vm.modalSetting.loading = false;
              });
          }
        }
      });
    },
    cancel() {
      //   this.formItem.id = 0;
      //   this.$refs["myForm"].resetFields();
      this.modalSetting.show = false;
      this.modalSetting.loading = false;
      this.modalSetting.index = 0;
    },
    changePage(page) {
      this.tableShow.currentPage = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.pageSize = size;
      this.getList();
    },
    handleCheckAll(groupId) {
      if (this.checkAllStatus[groupId]) {
        this.checkAllStatus[groupId] = false;
      } else {
        this.checkAllStatus[groupId] = !this.checkAllStatus[groupId];
      }
      this.checkAllIndeterminate[groupId] = false;

      if (this.checkAllStatus[groupId]) {
        let vm = this;
        this.groupList[groupId].forEach(item => {
          vm.formItem.app_api[groupId].push(item.hash);
        });
      } else {
        this.formItem.app_api[groupId] = [];
      }
    },
    checkAllGroupChange(groupId) {
      if (
        this.formItem.app_api[groupId].length === this.groupList[groupId].length
      ) {
        this.checkAllIndeterminate[groupId] = false;
        this.checkAllStatus[groupId] = true;
      } else if (this.formItem.app_api[groupId].length > 0) {
        this.checkAllIndeterminate[groupId] = true;
        this.checkAllStatus[groupId] = false;
      } else {
        this.checkAllIndeterminate[groupId] = false;
        this.checkAllStatus[groupId] = false;
      }
    },
    search() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    refreshAppSecret() {
      let vm = this;
      refreshAppSecretApi().then(response => {
        vm.formItem.app_secret = response.data.data.app_secret;
      });
    },
    getList() {
      let vm = this;
      vm.listLoading = true;
      getList({
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        id_card: vm.searchConf.id_card,
        nickname: vm.searchConf.nickname,
        phone: vm.searchConf.phone,
        name: vm.searchConf.name,
        status: vm.searchConf.status
      }).then(response => {
        vm.tableData = response.data.data.list;
        vm.tableShow.listCount = response.data.data.count;
        vm.listLoading = false;
      });
    },
    doCancel(data) {
      if (!data) {
        this.formItem.id = 0;
        // this.$refs["myForm"].resetFields();
        this.modalSetting.loading = false;
        this.modalSetting.index = 0;
      }
    },
    handlePointsUpdate(points) {
      const stringArray = points.map(point => point.join(","));
      // 使用 join 方法将所有子数组转换后的字符串用分号连接起来
      this.formItem.app_address = stringArray.join(";");
      console.log("从子组件接收的 points 数据：", points);
    },
    realNameAuth() {
      let vm = this;
      vm.modalSetting.loading = true;
      realNameAuthApi(vm.formItem.id).then(response => {
        vm.$Message.success(response.data.msg);
        vm.modalSetting.loading = false;
        getWxUserDetail(vm.formItem.id).then(response => {
          let res = response.data.data;
          vm.formItem.auth_status = res.auth_status;
        });
      });
    }
  }
};
</script>
